<template>
  <div>
    <el-form
      ref="formDataRef"
      :model="formData"
      :rules="rules"
      label-width="95px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="头像" prop="avatar">
            <CoverUpload
              v-model="formData.avatar"
              @callback="saveAvatar"
            ></CoverUpload>
          </el-form-item>
          <el-form-item label="昵称" prop="nickName">
            <el-input
              placeholder="起一个好听的名字"
              v-model="formData.nickName"
              size="large"
              ><template #prefix
                ><span class="iconfont icon-account"></span></template
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              placeholder="请输入手机号"
              v-model="formData.phone"
              size="large"
              ><template #prefix
                ><span class="iconfont icon-phone"></span></template
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <a
              href="javascript:void(0)"
              class="a-link"
              @click="showUpdataPassword"
              >修改密码</a
            >
            <!-- <el-input
          placeholder="请输入密码"
          v-model="formData.password"
          size="large"
          ><template #prefix
            ><span class="iconfont icon-account"></span></template
        ></el-input> -->
          </el-form-item>
          <el-form-item label="默认编辑器" prop="editorType">
            <el-radio-group v-model="formData.editorType">
              <!-- <el-radio label="富文本编辑器" :value="0"></el-radio>
              <el-radio label="Markdown编辑器" :value="1"></el-radio> -->
              <el-radio :label="0">富文本编辑器</el-radio>
              <el-radio :label="1">Markdown编辑器</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="学校" prop="profession">
            <el-input
              placeholder="请输入学校"
              v-model="formData.profession"
              size="large"
              ><template #prefix
                ><span class="iconfont icon-school-copy"></span></template
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-button plain color="#409eff" @click="saveMyInfo" size="large"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="简介" prop="introduction">
            <EditorHtml v-model="formData.introduction"></EditorHtml>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      @close="dialogConfig.show = false"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordformData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="至少8位，需要包含数字、字母和特殊字符"
            v-model="passwordformData.password"
            size="large"
            ><template #prefix
              ><span class="iconfont icon-password"></span></template
          ></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="rePassword">
          <el-input
            type="password"
            placeholder="请再次输入密码"
            v-model="passwordformData.rePassword"
            size="large"
            ><template #prefix
              ><span class="iconfont icon-password"></span></template
          ></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, reactive, ref } from "vue";
import { useStore } from "vuex";
const { proxy } = getCurrentInstance();
const store = useStore();
const api = {
  getUserInfo: "/getUserInfo",
  saveMyInfo: "/saveMyInfo",
  saveAvatar: "/saveAvatar",
  updateMyPassword: "/updateMyPassword",
};

const formDataRef = ref(null);
const formData = ref({});

const validateRePass = (rule, value, callback) => {
  if (value !== passwordformData.value.password) {
    callback(new Error(rule.message));
  } else {
    callback();
  }
};

const rules = {
  nickName: [{ required: true, message: "昵称不能为空" }],
  editorType: [{ required: true, message: "请选择默认编辑器" }],
  password: [
    { required: true, message: "请输入密码" },
    {
      validator: proxy.Verify.password,
      trigger: "blur",
      massge: "密码最少八位，且包括数字字母下划线",
    },
  ],
  rePassword: [
    { required: true, message: "请再次输入密码" },
    { validator: validateRePass, message: "两次输入的密码不一致" },
  ],
  phone: [
    { required: true, message: "请输入手机号" },
    {
      validator: proxy.Verify.phone,
      trigger: "blur",
      message: "请输入正确的手机号",
    },
  ],
};

const getUserInfo = async () => {
  let result = await proxy.Request({
    url: api.getUserInfo,
  });
  if (!result) {
    return;
  }
  formData.value = result.data;
};
getUserInfo();

const saveMyInfo = async () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let result = await proxy.Request({
      url: api.saveMyInfo,
      params: {
        nickName: formData.value.nickName,
        avatar: formData.value.avatar,
        phone: formData.value.phone,
        editorType: formData.value.editorType,
        profession: formData.value.profession,
        introduction: formData.value.introduction,
      },
    });
    if (!result) {
      return;
    }
    proxy.Message.success("保存成功");
    store.commit('updateUserInfo',{
      nickName: formData.value.nickName,
      avatar: formData.value.avatar,
    })
  });
};

// 修改头像
const saveAvatar = async (avatar) => {
  let result = await proxy.Request({
    url: api.saveAvatar,
    params: {
      avatar: avatar,
    },
  });
  if (!result) {
    return;
  }
  proxy.Message.success("修改头像成功");
  // document.location.reload();
  store.commit('updateUserInfo',{
    nickName: formData.value.nickName,
    avatar: avatar,
  })
};

// 修改密码
const passwordFormRef = ref(null);
const passwordformData = ref({});
const dialogConfig = reactive({
  show: false,
  title: "修改密码",

  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        submitPass();
      },
    },
  ],
});

const showUpdataPassword = () => {
  dialogConfig.show = true;
  nextTick(() => {
    // formDataRef.value.resetFields();
    passwordformData.value = {};
  });
};

const submitPass = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let result = await proxy.Request({
      url: api.updateMyPassword,
      params: {
        password: passwordformData.value.password,
      },
    });
    if (!result) {
      return;
    }
    dialogConfig.show = false;
    proxy.Message.success("修改密码成功");
  });
};
</script>

<style scoped lang="scss">
</style>